<template>
  <el-dialog :title="title" :visible.sync="dialogRoleVisible" width="30vw" :close-on-click-modal="false" @close="close"
    :append-to-body="true">
    <el-form ref="form" :model="form" :rules="rules" label-width="0.8rem">
      <el-form-item label="角色名称" prop="mingcheng">
        <el-input v-model.trim="form.mingcheng" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所属机构">
        <el-input v-model.trim="form.jigouid" readonly autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model.trim="form.miaoshu" type="textarea" :rows="5" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="资源">
        <el-tree :props="defaultProps" v-model="form.ziyuanTree" :data="nodedata" node-key="id" show-checkbox
          ref="ziyuanTree">
        </el-tree>
      </el-form-item>
    </el-form>
    <!-- <div class="list-button-group">
      <div class="button-item">
        <el-button type="primary" icon="el-icon-plus" @click="insertEvent()">
          新增
        </el-button>
      </div>
    </div>
    <ux-grid border show-overflow="title" ref="RoleTable" keep-source :height="tabheight" :highlightCurrentRow="false"
      widthResize :rules="ruleslist" @selection-change="selectChange" :validConfig="{ autoPos: true }"
      :edit-config="{ trigger: 'click', mode: 'row' }">
      <ux-table-column type="checkbox" width="50" />
      <ux-table-column type="index" title="序号" width="50"></ux-table-column>
      <ux-table-column field="mingcheng" title="角色名称" :edit-render="{ autofocus: '.el-input__inner' }">
        <template v-slot:edit="scope">
          <el-input v-model.trim="scope.row.mingcheng" placeholder="请输入名称" />
        </template>
      </ux-table-column>
      <ux-table-column field="jigouid" title="所属机构" :edit-render="{ autofocus: '.el-input__inner' }">
        <template v-slot:edit="scope">
          {{ scope.row.jigouid }}
        </template>
      </ux-table-column>
      <ux-table-column field="miaoshu" title="描述" :edit-render="{ autofocus: '.el-input__inner' }">
        <template v-slot:edit="scope">
          <el-input v-model.trim="scope.row.miaoshu" placeholder="请输入描述" />
        </template>
      </ux-table-column>
    </ux-grid> -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { jueseziyuan, juesesave, getZiyuanTree, getJiGouZYByID } from '@/api/institution'

export default {
  name: 'UserManagementEdit',
  data() {
    return {
      form: {},
      // ruleslist: {
      //   mingcheng: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      // },
      rules: { mingcheng: [{ required: true, message: '请输入名称', trigger: 'blur' }] },
      title: '',
      dialogRoleVisible: false,
      jglblist: [],
      shangjilist: [],
      rolelist: [],
      tabheight: 300,
      defaultProps: {
        label: 'text',
        children: 'children'
      },
      nodedata: [],
      count: 1,
      JigouBYIDLIST: []
    }
  },
  props: {
    jueseData: {
      type: Array,
      default: () => {
        return []
      },
    },
    rowjigouid: {
      type: String,
      default: ''
    }
  },
  created() {
    this.getZiyuantree()
  },
  watch: {
    rowjigouid: {
      handler: function (val) {
        this.form.jigouid = val
      },
      deep: true,
      autocomplete: true
    }
  },
  methods: {
    showEdit(row) {
      if (!row.id) {
        console.log(111);
        this.title = '新增角色'
        this.$nextTick(() => {

          this.$refs.ziyuanTree.setCheckedKeys([]);
        })
      } else {
        this.title = '编辑角色'
        this.form = Object.assign({}, row)
        this.getJgZYBYID(row)
      }
      this.dialogRoleVisible = true
      // this.$nextTick(() => {
      //   this.$refs.RoleTable.reloadData(this.jueseData)
      // })
    },
    close() {
      this.dialogRoleVisible = false
    },
    handleCheckChange() {
      console.log(this.$refs.ziyuanTree.getCheckedKeys());
    },
    async getJgZYBYID(row) {
      const { data } = await getJiGouZYByID({ 'jigouid': row.jigouid })
      this.JigouBYIDLIST = data
      this.setCheckedNodes()
    },
    save(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          this.form.jigouid = this.rowjigouid
          this.form.ziyuanList = this.$refs.ziyuanTree.getCheckedKeys()
          let ziyuanIds = this.form.ziyuanList.toString()
          ziyuanIds = ziyuanIds + ','
          const { msg } = await juesesave(ziyuanIds, this.form)
          this.$baseMessage(msg, 'success')
          this.$emit('changeJuese')
          this.close()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async getZiyuantree() {
      let { data } = await getZiyuanTree({})
      this.nodedata = data
    },
    setCheckedNodes() {
      this.$nextTick(() => {
        this.$refs.ziyuanTree.setCheckedNodes(this.JigouBYIDLIST);
      })
    },
    async insertEvent(row) {
      let record = { jigouid: this.rowjigouid }
      // 加入行, 表示加入行的row对象，row为空则插入第一行，为-1插入最后一行
      let { row: newRow } = await this.$refs.RoleTable.insertRow(record)
      // 激活单元格编辑
      await this.$refs.RoleTable.setActiveRow(newRow)
    },
    selectChange(e) { },
    delwzDetail() {
      this.$refs.RoleTable.remove(this.$refs.RoleTable.getCheckboxRecords())
    },

  },
}
</script>
<style lang="scss" scoped>
.el-select--small {
  width: 100%;
}

.list-button-group {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;

  .button-item {
    padding: 0px 10px;
  }

  .button-item:first-child,
  &:last-child {
    padding: 0px 10px 0 0;
  }
}

::v-deep {
  .el-dialog__body {
    padding: 20px !important;
  }

  .elx-table--header-wrapper {
    background-color: rgb(233, 243, 255) !important;
  }

  .elx-header--column {
    background-image: none !important;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input--inner {
    width: 100% !important;
  }

  .el-form-item--small.el-form-item {
    margin-bottom: 0px;
    margin-top: 18px;
  }
}
</style>